<template>
  <div v-html="content"
       class="table-cell">
  </div>
</template>
<script>
  const icon16Office = {
    20: {
      style: 'color:#67c13A',
      class: 'xicon-form-text'
    },
    41: {
      style: 'color:#377ef0',
      class: 'xicon-word'
    },
    42: {
      style: 'color:#56a03d',
      class: 'xicon-excel'
    },
    43: {
      style: 'color:#11b5d2',
      class: 'xicon-wps'
    },
    44: {
      style: 'color:#11b5d2',
      class: 'xicon-excel'
    },
    45: {
      style: 'color:#ff4608',
      class: 'xicon-pdf'
    },
    46: {
      style: 'color:#157efb',
      class: 'xicon-ofd'
    }
  };
  import { iconFlow } from '../icon-data';
  export default {
    name: 'TableCollum',
    props: {
      record: Object,
      type: String
    },
    data() {
      return {
        content: ''
      };
    },
    watch: {
      record() {
        this.content = this.getRenderHtml(this.type, this.record);
      }
    },
    methods: {
      getRenderHtml(type, data) {
        let txt = data[type];
        var hasDueTime =
          (data.deadLineDate != null && data.deadLineDate != '' && data.deadLineDate != '0') ||
          (data.expectedProcessTime != null &&
            data.expectedProcessTime != '' &&
            data.expectedProcessTime != '0');
        var isOverdue = data.isCoverTime;
        if (type === 'subject') {
          var tmpTxt = this.reverse(txt);
          // 标题列加深
          txt = "<span class='finish-list-subject-title' title='" + txt + "'>" + tmpTxt + '</span>'; // 如果是代理 ，颜色变成蓝色

          if (data.proxy) {
            txt = "<span class='color_blue'>" + txt + '</span>';
          } // 加图标
          // 重要程度
          if (data.importantLevel != '' && data.importantLevel != 1) {
            txt =
              "<span style='color:#fb3a36;' class='icon-default xicon-important" +
              (data.importantLevel - 1) +
              "'></span>" +
              txt;
          } // 附件
          if (data.hasAttsFlag == true) {
            txt = txt + "<span style='color:#FE7A22' class='icon-default xicon-affix'></span>";
          } // 协同类型
          if (
            data.bodyType != '' &&
            data.bodyType != null &&
            data.bodyType != '10' &&
            data.bodyType != '30' &&
            data.bodyType !== '90'
          ) {
            if (icon16Office[data.bodyType]) {
              txt =
                txt +
                "<span style='" +
                icon16Office[data.bodyType].style +
                "' class='" +
                icon16Office[data.bodyType].class +
                " icon-default'></span>";
            }
          } // 流程状态
          if (data.state != null && data.state != '' && data.state != '0') {
            txt = "<span style='color:#449bc0' class='" + iconFlow[data.state] + "'></span>" + txt;
          } // 如果设置了处理期限(节点期限),添加超期图标
          if (hasDueTime) {
            if (isOverdue) {
              // 超期图标
              txt = txt + "<span style='color:#FB4747' class='icon-default xicon-time'></span>";
            } else {
              // 未超期图标
              txt = txt + "<span style='color:#67C13A' class='icon-default xicon-time'></span>";
            }
          }
          return txt;
        } else if (type === 'nodeDeadLineName') {
          if (hasDueTime) {
            if (isOverdue) {
              // 节点超期
              var title = this.$i18n('collaboration.listDone.nodeIsCoverTime');
              txt = "<span class='color_red' title='" + title + "'>" + txt + '</span>';
            } else {
              // 节点未超期
              var title = this.$i18n('collaboration.listDone.nodeNotCoverTime');
              txt = "<span title='" + title + "'>" + txt + '</span>';
            }
          }
          return txt;
        } else if (type === 'print') {
          if (data.print > 0) {
            txt = "<span class='font_bold'>" + this.$i18n('common.yes') + '</span>';
          } else {
            txt = "<span class='font_bold'>" + this.$i18n('common.no') + '</span>';
          }
        } else if (type === 'currentNodesInfo') {
          txt = "<a title='" + txt + "'>" + txt + '</a>';
        }
        return txt;
      },
      reverse(str) {
        str = str.replace(/</g, '\&lt');
        str = str.replace(/>/g, '\&gt');
        return str;
      }
    },
    created() {
      this.content = this.getRenderHtml(this.type, this.record);
    }
  };
</script>
<style lang="scss" scoped>
  .table-cell {
    display: flex;
    align-items: center;

    .color_blue {
      color: #2490f8;
    }

    .color_red {
      color: red;
    }
  }
</style>
<style>
  .icon-default {
    font-weight: initial;
  }

  .finish-list-subject-title {
    max-width: calc(100% - 60px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>
